<!DOCTYPE html>
<head>
<script type="text/javascript">
	var context;
	var dogBarkingBuffer = null;
	window.addEventListener('load', init, false);
	function init() {
		try {
			window.AudioContext = window.AudioContext || window.webkitAudioContext;
			context = new AudioContext();
		}
		catch(e) {
			alert("Web Audio API is not supported in this browser");
		}
		loadDogSound("./media/Live.mp3");

	}
	function loadDogSound(url) {
		var request = new XMLHttpRequest();
		request.addEventListener("progress", updateProgress, false);
		request.open('GET', url, true);
		request.responseType = 'arraybuffer';

		// Decode asynchronously
		request.onload = function() {
			context.decodeAudioData(request.response, function(buffer) {
				dogBarkingBuffer = buffer;
				playSound(dogBarkingBuffer)
			}, function(errorData) {
				console.log(errorData);
			});
		}

		request.send();
	}
	function playSound(buffer) {
		var source = context.createBufferSource();
		source.buffer = buffer;
		source.connect(context.destination);
		source.start(0);
	}
	function updateProgress(oEvent) {
		var progressBar = document.getElementById("progressBar");
		progressBar.value = oEvent.loaded/oEvent.totalSize*100;
		console.log(oEvent);
	}
</script>
</head>

<body>
	<progress id="progressBar" max="100" value="0"></progress>  
</body>
</html>
